<template>
  <div>
    {{ counter.a }} : {{ b }}
    <button @click="add">点击</button>
    <HelloWorld ref="chello" @update="onUpdate"></HelloWorld>
  </div>
</template>

<script setup>
import {defineStore} from 'pinia';
import HelloWorld from './components/HelloWorld.vue';
import {ref, onMounted, useTemplateRef, nextTick} from 'vue';
const b = ref(0);
const useCounterStore = defineStore('counter', {
  state() {
    return {
      a: 1,
      b: 2,
    };
  },
  // 也可以定义为
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.a++;
    },
  },
});
const onUpdate = e => {
  console.log(`helloworldUpdate`, e);
};

const counter = useCounterStore();
const add = () => {
  counter.increment();
  console.log(counter.a);
};
const chello = useTemplateRef('chello');
onMounted(() => {
  console.log(chello.value);
  nextTick(function () {
    let c = chello.value;
    c.showMe();
    console.log(c, 'c');
  });
});

/*export default {*/
/*components: {*/
/*HelloWorld,*/
/*},*/
/*setup() {*/
/*onMounted(() => {*/
/*console.log(chello);*/
/*console.log(`helloworld`);*/
/*});*/
/*return {*/
/*store: useCounterStore(),*/
/*};*/
/*},*/
/*methods: {*/
/*add() {*/
/*console.log(this.$refs['chello']);*/
/*useCounterStore().increment();*/
/*},*/
/*},*/
/*};*/
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
